<!-- goodsinfo component -->
<template>
  <div class="gz-goodsinfo">
    <!-- 小球动画 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <!-- 1、轮播图区域 -->
    <div class="gz-carousel">
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <carousel :dataList="thumbList" :isfull="false"></carousel>
          </div>
        </div>
      </div>
    </div>

    <!-- 2、购物数据区域 -->
    <div class="gz-shopping">
      <div class="mui-card">
        <div class="mui-card-header">
          <h1 class="gz-sg-title" v-text="goodsDetail.title"></h1>
        </div>
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <p class="gz-sg-price">
              市场价：<del>￥{{ goodsDetail.market_price}}</del>&nbsp;&nbsp;&nbsp;&nbsp;
              销售价：<span class="gz-sg-pe-sellingv">￥{{ goodsDetail.sell_price }}</span>
            </p>
            <div class="gz-sg-quantity">
              购买数量：<numbox @getCount="getSelectedCount" :maxCount="goodsDetail.stock_quantity"></numbox>
            </div>
            <mt-button type="primary" @click="buyNow">立刻购买</mt-button>
            <mt-button type="danger" @click="addToCart">加入购物车</mt-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 3、商品参数区域 -->
    <div class="gz-params">
      <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>食品货号：{{ goodsDetail.goods_no }}</p>
          <p>库存情况：{{ goodsDetail.stock_quantity }}</p>
          <p>上架时间：{{ goodsDetail.add_time | dataFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="introduce">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="discuss">商品评论</mt-button>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import carousel from "../subcomponent/carousel.vue";
import numbox from "../subcomponent/numbox.vue";
export default {
  data() {
    return {
      id: this.$route.params.id, // url传递的商品id
      thumbList: [], // 轮播图
      goodsDetail: {}, // 商品详情
      ballFlag: false, // 控制小球显示和隐藏
      selectedCount: 1, // 选中的商品数量，默认1
    };
  },
  created() {
    this.getThumbList();
    this.getGoodsDetail();    
  },
  
  methods: {
    // 获取图片列表
    getThumbList() {
      this.axios.get("api/getthumimages/" + this.id).then(resp => {
        if (resp.data.status === 0) {
          // 获取数据成功
          resp.data.message.forEach(item => {
            item.img = item.src;
          });
          this.thumbList = resp.data.message;
        } else {
          // 获取失败
          Toast("获取数据失败");
        }
      });
    },
    getGoodsDetail() {
      this.axios.get("api/goods/getinfo/" + this.id).then(resp => {
        if (resp.data.status === 0) {
          // 获取数据成功
          this.goodsDetail = resp.data.message[0];
         
        } else {
          // 获取失败
          Toast("获取数据失败");
        }
      });
    },
    // 购买
    buyNow() {},
    // 加入购物车
    addToCart() {
       this.ballFlag = !this.ballFlag;
       
       // 构建存入store中商品对象
       let count1 = parseInt(this.selectedCount);
       let goods = {
         id: this.id,
         price: this.goodsDetail.sell_price,
         count: count1,
         selectedFlag: true
       };
       this.$store.commit('insertCart', goods);
       
    },
    beforeEnter(el) {
      el.style.transform = 'translate(0, 0)';
    },
    enter(el, done) {
      el.offsetWidth;
      // 解决小球因设备分辨率、页面滑动引起的动画异常
      // domObj.getBoundingClientRect() 获取DOM元素相对页面的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      const badgePosition = document.getElementById('badge').
        getBoundingClientRect();
      
      let xDist = badgePosition.left - ballPosition.left;
      let yDist = badgePosition.top - ballPosition.top;
      el.style.transform = `translate(${ xDist }px, ${ yDist }px)`;
      el.style.transition = 'all 0.5s cubic-bezier(.4, -0.3, 1, .68)';
      done()
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
    },
    // 图文介绍
    introduce() {
      this.$router.push({name:'goodsdesc', params:{ id: this.goodsDetail.id}})
    },
    // 商品评论
    discuss() {
      this.$router.push({name:'goodscomment', params:{ id: this.goodsDetail.id}})
    },
    // 获取选中的商品数量
    getSelectedCount(count) {
      this.selectedCount = count;
    }
  },

  components: {
    carousel,
    numbox
  }
};
</script>

<style lang='scss' scoped>
.gz-goodsinfo {
  background-color: #eee;
  overflow: hidden;

  .gz-shopping {
    .gz-sg-title {
      font-size: 16px;
      font-weight: 500;
    }
    .gz-sg-price {
      font-weight: 700;
      .gz-sg-pe-sellingv {
        color: red;
      }
    }
    .gz-sg-quantity {
      margin-bottom: 15px;
    }
  }
  .gz-params {
    .mui-card-footer {
      display: block;
      button {
        margin: 15px 0;
      }
    }
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 391px;
    left: 147px;
    z-index: 99;
  }
}
</style>